<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border cellsapcing="0">
    <thead>
    <tr id="tr1">
    <!-- <th>新闻唯一ID</th>
    <th>发布时间</th>
    <th>文章标题</th>
    <th>文章描述</th>
    <th>文章来源</th>
    <th>封面图片</th> -->

    </tr>
    <thead>
      <tbody id="tr2">
        <tr >
        </tr>
      </tbody>
    </table>
    </div>
    <div></div>
    <input type="button" value="上一页" id="prev" disabled>
    <span id="pagea">1</span>
    <input type="button" value="下一页" id="next">
    <select name="" id="select">
      <option value="10">10条</option>
      <option value="20">20条</option>
      <option value="30">30条</option>
      <option value="50">50条</option>
    </select>
  
  <script src="../jquery/jquery-1.12.4.min.js"></script>
  <script src="../jquery/jquery-3.6.1.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
  <script src="./creater.js"></script>
  <script>
// css通用配置  宽度 高度  居住 颜色
// thead表头 通用配置  数组记录 表头信息
  //th对应一条数据 key：vallue
  var tableheader =[
  {tiele:"新闻唯一id",style :{'text-align': 'center','width':' 100px','height': '30px'},keyId:"id"},
  {tiele:"发布时间",keyId:"ctime"},
  {tiele:"文章标题",keyId:"title"},
  {tiele:"文章描述",keyId:"description"},
  {tiele:"文章来源",keyId:"source"},
  {tiele:"封面图片",keyId:"picUrl" ,isImg : true},
  ]
// 调用函数 ，创建表头
createheaderr(tableheader)

// 列表数据请求 
function requestList(data) {
  data.key = '6c65d64588b512789e285c57f88e6995'
  $.ajax({
    url: "https://apis.tianapi.com/esports/index",
    method : "GET",
    data : data,
    success : function (res) {
      var newslist = res.result.newslist
      console.log(JSON.stringify(newslist));
      creatList(newslist,tableheader)
    },
    error : function (error) {
      console.log(error);
    }
  })
}
// f分页参数
var pages = {
  num : 10,
  page : 1
}
// 请求默认页面
requestList(pages)
// 上一页
$("#prev").on("click",function () {
  pages.page-=1;
  if (pages.page===1) {
    $("#prev").prop("disabled",true)
  }requestList(pages)
  $("#pagea").text(pages.page)
})
// 下一页
$("#next").on("click",function () {
  pages.page+=1;
  if (pages.page!==1) {
    $("#prev").prop("disabled",false)
  }
  requestList(pages)
  $("#pagea").text(pages.page)
})

// 更改每页显示数量
$("#select").on("change",function (e) {
    console.log($(this));
    pages.num = $(this).val()
    requestList(pages)
  }
)
  </script>
</body>
</html>
